<!DOCTYPE html>
<html>
<head>
    <title>9.9元课程上课情况</title>
    <link rel="stylesheet" href="../static/css/minghu.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <style>
        .num-box{
            text-align: center;
            background-color:#289e63;
            color:#ffffff;
            width:20px;
            border-radius: 4px;
        }
        .outer-box{
            font-size:12px;
            margin:6px;
        }
        .inner-box{
            background-color:#f2f5f3;
            font-size: 12px;
            color:#23412f;

            border-radius: 4px;
            text-align: left;
            padding:12px;
            margin-bottom: 22px;
            line-height: 28px;
        }


    </style>
</head>
<body style="background-color: rgb(254, 254, 255);">
    {% include 'show_ins_info.html' %}
    <hr>
    <h2 id="title" style="margin-bottom: 40px;color:#289e63;">9.9元课程上课情况</h2>        
    <div>
        <div class="form-row"><h4>课程结束月份</h4> <input type="month" id="endMonth" style="width:120px;" onchange="show99PointDueData();"></div>
    </div>
    <div id="msg" style="color:red;padding-top:10px;"></div>
    <div>
        <!-- <hr style="border-top:1px dashed;margin-bottom: 30px;"> -->
        <div id="dueData" ></div>

    </div>


    <script src="../static/js/common.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    
    <script>
        let insName;
        let insId;
        let insRole;
        let insList;
        
        document.addEventListener('DOMContentLoaded',function(){
            // loginCheck();        
            const insInfo=hideInsSelectBlockAndGetInsInfo();
            insId=insInfo.sessionInsId;
            insName=insInfo.sessionInsName;
            insRole=insInfo.sessionInsRole;
            // console.log(insName)
            //教练角色不允许进入该页面，返回Index
            if(insRole==='ins'){
                window.location.replace('./index');
            }

            selectToday('endMonth','month');


           
            fetch('/get_ins_list', {
                method: 'GET',
            })
            .then(response => response.json())
            .then(data => {
            //将data赋值给块变量cus_list，供后面的handleInput使用
                console.log('ins list:',data);
                insList=data['ins_list'];
            })
            .catch(error => console.error('Error:', error));           
            document.getElementById('msg').innerHTML='';

            show99PointDueData();         

        });

        function show99PointDueData(){            
            const month=document.getElementById('endMonth').value;
            const msg=document.getElementById('msg');
            msg.innerHTML='正在获取9.9元课程上课信息';

            fetch('/get_due_9point9_data',{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body:JSON.stringify({"today":month,"cls_name":"9.9元私教"})
            })
            .then(response=>response.json())
            .then(data=>{
                // console.log('9.9 due data:',data);
                if(data['res']==='ok'){
                    msg.innerHTML='';
                    document.getElementById('dueData').innerHTML='';
                    showDataList(data['data'])
                }else{
                    msg.innerHTML=`<div style='margin:12px;'>没有9.9元课程数据</div>`;
                    document.getElementById('dueData').innerHTML='';
                }
            })
            .catch(error=>{
                msg.innerHTML='';
                document.getElementById('dueData').innerHTML='';
                console.log(error);

            });            
        }

        function showDataList(data){
            // console.log(data);
            const dueDataBox=document.getElementById('dueData');
            const today=new Date();
            let n=1;
            const invalidTxtColor='#e0553d';
            const validTxtColor='#3de06e';
            const itemNameColor='#92a698';
            data.forEach(element => {
                // console.log(element);
                const div=document.createElement('div');
                const num=document.createElement('div');

                num.innerHTML=`${n}`;
                const cusName=document.createElement('div');
                cusName.innerHTML=`<span style='font-size:16px;color:#6a8a72;font-weight:bold;'>${element['客户姓名']}</span> / <span style='color:#6a8a72;'>${element['教练姓名']}</span>`;
                const cardId=document.createElement('div');
                cardId.innerHTML=`<span style='color:${itemNameColor};'>卡号：</span>${element['卡号']}`;
                
                const status=document.createElement('div');
                const dayDiff=compareDatesOnly2(today,new Date(element['课程结束时间']));
                // console.log(element['卡号'],dayDiff);
                let statusStr;
                
                if(element['上课日期']==='0'){
                    if(dayDiff<0){
                        statusStr=`<span style='color:${invalidTxtColor};'>失效</span> / 过期 & 未上课`; 
                    }else{
                        statusStr=`<span style='color:${validTxtColor};'>正常有效</span>`;
                    }
                                   
                }else{
                    if(dayDiff<0){
                        statusStr=`<span style='color:${invalidTxtColor};'>失效</span> / 过期 & 已上课 (${dateToString(element['上课日期'],'dateDot')})`;
                    }else{
                        statusStr=`<span style='color:${invalidTxtColor};'>失效</span> / 已上课 (${dateToString(element['上课日期'],'dateDot')})`;
                    }
                }

                let remainDaysStr;
                if(statusStr.includes('有效')){
                    // if(dayDiff<=20){
                    //     remainDaysStr=`（剩余${dayDiff}天）`;
                    // }else{
                    //     remainDaysStr='';
                    // }
                    remainDaysStr=`（剩余${dayDiff}天）`;
                    if(dayDiff<=7){
                        remainDaysStr=`<span style='color:${invalidTxtColor};'>（剩余${dayDiff}天）</span>`;
                    }
                    
                }else{
                    remainDaysStr='';
                }


                status.innerHTML=`<span style='color:${itemNameColor};'>状态：</span>${statusStr}`;
                const prd=document.createElement('div');
                const endDate= new Date(element['课程结束时间']);
                endDate.setHours(0,0,0,0);
                endDate.setDate(endDate.getDate()-1);

                prd.innerHTML=`<span style='color:${itemNameColor};'>有效期：</span>${dateToStringGmt(element['课程开始时间'],'dateDot')} - ${dateToString(endDate,'dateDot')} ${remainDaysStr}`;
                
                num.classList.add('num-box');

                div.appendChild(num);
                div.appendChild(cusName);
                div.appendChild(cardId);
                div.appendChild(status);
                div.appendChild(prd);

                div.classList.add('inner-box');

                dueDataBox.appendChild(num);
                dueDataBox.appendChild(div);
                dueDataBox.classList.add('outer-box');
                n+=1;
            });

            
        }



    </script>
  
</body>
</html>
